<template>
  <PageWrapper
    title="两表"
    contentBackground
    content="重庆邮电大学学生社团活动情况及指导教师指导情况统计表"
    contentClass="p-4"
  >
    <BasicForm @register="register">
      <template #window1>
        <a-row class="rboard">
          <a-col :span="19">
            <a-list
              size="small"
              :pagination="false"
              :locale="{ emptyText: '还没有添加哦~快去添加吧' }"
            >
              <template v-for="(item, index) in societyActivityValue" :key="item.id">
                <a-list-item class="list">
                  <span class="ellipsis">
                    {{ index + 1 }}: 社团活动：{{ item.ClubActivities }} 日期：{{
                      item.time
                    }}
                    人数：{{ item.man }}</span
                  >
                </a-list-item>
              </template>
            </a-list>
          </a-col>
          <a-col :span="5">
            <a-button type="link" @click="openwindow1" class="add">+</a-button>
            <a-button type="link" @click="seeInfo1">查看</a-button>
          </a-col>
        </a-row>
      </template>
      <template #fac>
        <a-row class="rboard">
          <a-col :span="19">
            <a-list
              size="small"
              class="list2"
              :pagination="false"
              :locale="{ emptyText: '还没有添加哦~快去添加吧' }"
              :data-source="guidanceValue"
            >
              <template #renderItem="{ item, index }">
                <a-list-item>
                  <span class="ellipsis">
                    {{ index + 1 }}: 指导内容：{{ item.GuidingContent }} 时间：{{ item.time }}</span
                  >
                </a-list-item>
              </template>
            </a-list>
          </a-col>
          <a-col :span="5">
            <a-button type="link" @click="openwindow2" class="add">+</a-button>
            <a-button type="link" @click="seeInfo2">查看</a-button>
          </a-col>
        </a-row>
      </template>
    </BasicForm>
    <societyActivity @register="register1" @give-father="receiveSon" />
    <Guidance @register="register2" @give-guidance="GuidanceReceiveSon" />
    <societyActivityInfo
      @register="register3"
      :info="societyActivityValue"
        />
    <GuidanceInfo @register="register4" :info="guidanceValue" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { defHttp } from '/@/utils/http/axios';
  import { BasicForm, useForm } from '/@/components/Form';
  import { ref, Ref, watch,provide  } from 'vue';
  import { schemas1 } from './data/data';
  import { schemas2 } from './unrequired';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';
  import { List as AList, ListItem as AListItem, Row as ARow, Col as ACol } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import societyActivity from './societyActivity.vue';
  import Guidance from './Guidance.vue';
  import societyActivityInfo from './societyActivityInfo.vue';
  import GuidanceInfo from './GuidanceInfo.vue';

  enum Api {
    FORM = '/form',
  }

  const accountInfoApi = (params: any = null) => defHttp.get({ url: Api.FORM, params });
  let required: boolean = true;
  let schemas = required ? schemas1 : schemas2;
  let societyActivityValue: Ref<any[]> = ref([]);
  let guidanceValue: Ref<any[]> = ref([]);
  //弹窗
  const [register1, { openModal: openwindow1 }] = useModal();
  const [register2, { openModal: openwindow2 }] = useModal();

  const [register3, { openModal: seeInfo1 }] = useModal();
  const [register4, { openModal: seeInfo2 }] = useModal();

  // 表单
  // const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
  const { createMessage } = useMessage();

  const [register, { validate, setProps, getFieldsValue }] = useForm({
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 10,
    },
    baseColProps: {
      //这个是占用位置,一行共24个
      span: 12,
    },
    schemas: schemas,
    // 每个组件体积
    actionColOptions: {
      offset: 8,
      span: 12,
    },
    submitButtonOptions: {
      text: '提交',
    },
    submitFunc: customSubmitFunc,
  });
  //接受社团活动数据
  function receiveSon(params) {
    societyActivityValue.value.push(params);
  }
  const removeActivity = (index) => {
    // 从数组中删除指定索引的输入框对象
    societyActivityValue.value.splice(index, 1);
  };
  const delSocietyActivity = (index: number) => {
    // 从数组中删除指定索引的输入框对象
    removeActivity(index);
  };
  provide("delSocietyActivity",delSocietyActivity)
  watch(
    () => societyActivityValue.value,
    (val, preVal) => {
      //val为修改后的值,preVal为修改前的值
       console.log("message", val, preVal)
    },
    {
      //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
      //那么首次执行，val为默认值,preVal为undefined
      immediate: true,
      //这个参数代表监听对象时，可以监听深度嵌套的对象属性
      //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
      deep: true,
    },
  );
  //接受指导活动
  function GuidanceReceiveSon(params) {
    guidanceValue.value.push(params);
  }
  const removeGuidance = (index) => {
    // 从数组中删除指定索引的输入框对象
    guidanceValue.value.splice(index, 1);
  };

  async function customSubmitFunc() {
    await validate();
    // 获取表单
    let parames = getFieldsValue();
    // let arrayOfValues = inputs.value.map((obj) => obj.value);
    // parames['GuidingContent'] = arrayOfValues;
    //添加指导活动
    parames['GuidingContent'] = guidanceValue.value;
    // 添加社会活动
    parames['societyActivity'] = societyActivityValue.value;
    // parames inputs
    setProps({
      submitButtonOptions: {
        loading: true,
      },
    });
    await accountInfoApi(parames);
    setProps({
      submitButtonOptions: {
        loading: false,
      },
    });
    createMessage.success('提交成功！');
  }
  function FatherClick(index){
    removeGuidance(index);
  };
  provide("FatherClick",FatherClick)
</script>
<style lang="less" scoped>
  .form-wrap {
    padding: 24px;
    background-color: @component-background;
  }

  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rboard {
    border: 1px solid rgb(217, 217, 217);
    border-radius: 10px;
  }
  .add {
    font-size: 25px;
  }
</style>
./data/data
